<template>
  <div class="chat-box">
    <div ref="chatHistory" class="chat-history">
      <div v-for="userMessage in userMessages" :key="userMessage.creatDate" class="hisusermessage">
        <!-- <div>
          You:{{ userMessage.userMessage }}
        </div>
        <el-divider />
        <div>
          ChatGPT: {{ userMessage.answer }}
        </div> -->
        <div class="markdown-body" v-html="userMessage.userMessage" />
        <el-divider />
        <div class="markdown-body" v-html="userMessage.answer" />
      </div>
      <!-- 对话内容将在这里显示 -->
      <div v-for="(message, index) in messages" :key="index" class="message">
        {{ message }}
      </div>

    </div>

    <div class="input-box">
      <input v-model="newMessage" placeholder="请输入您的问题" @keyup.enter="sendMessage">
      <button @click="sendMessage">发送</button>
      <button @click="showHistory">历史记录</button>
    </div>
  </div>
</template>

<script>
// 为了让markdown转换的文本更好看，使用这个文件进行渲染
import 'github-markdown-css/github-markdown.css'
// 导入全局变量
import { test, hisData } from '@/api/ai'
export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      userMessages: {},
      chatHistory: null
    }
  },
  mounted() {
    // 在组件挂载后设置chatHistory的引用
    this.chatHistory = this.$refs.chatHistory;
    // 初始化时将滚动条滚动到底部
    this.scrollToBottom()
  },
  methods: {
    showHistory() {
      hisData().then(response => {
        this.userMessages = response.data
        this.scrollToBottom()
      }).catch(_error => {
        this.messages.push(`ChatGPT: 服务异常！`)
        this.scrollToBottom()
      })
    },
    sendMessage() {
      if (this.newMessage.trim() !== '') {
        this.messages.push(`You: ${this.newMessage}`)
        // const encodedMessage = encodeURIComponent(this.newMessage) // 对消息进行URL编码
        test({
          question: this.newMessage // 发送编码后的消息
        }).then(response => {
          // 接受返回的名称
          const { data } = response
          this.messages.push(`ChatGPT: ${data}`)
          this.scrollToBottom()
        }).catch(_error => {
          this.messages.push(`ChatGPT: 服务异常！`)
          this.scrollToBottom()
        })
        this.newMessage = ''
      }
    },
    scrollToBottom() {
      // 将滚动条滚动到底部
      this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
    }
  }
}
</script>

<style scoped>
.chat-box {
  height: 550px; /* 设置合适的高度，使得在浏览器中显示滚动条 */
  border: 1px solid #ccc;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-history {
  flex: 1; /* 使用 flex 属性填充剩余空间，即占据屏幕高度的 100% */
  overflow-y: auto;
  padding: 10px;
}

.message {
  border: 1px solid #7e4a4a;
  margin-bottom: 8px;
}

.hisusermessage {
  border: 1px solid #7e4a4a;
  margin-bottom: 8px;
}

/* .input-box {
  display: flex;
  align-items: center;
  padding: 10px;
}

input {
  flex-grow: 1;
  margin-right: 10px;
} */

.input-box {
  position: fixed;
  bottom: 30px;
  left: 20;
  width: 100%;
  background-color: #6cecf52e; /* 可以根据你的设计更改背景色 */
  padding: 10px;
  display: flex;
  align-items: center;
}

.input-box input {
  flex: 0.95;
  margin-right: 10px;
}

button {
  cursor: pointer;
  margin-right: 8px; /* 可以根据需要调整间距大小 */
}
</style>
